<template>
  <div class="playerContentMain">
    <div class="playerContent">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="100px"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item prop="switch_status">
          <span style="color:#1D2129;font-size: 16px;font-weight:600;margin-right:10px;">微信官方播放器组件</span> <el-switch
            v-model="ruleForm.switch_status"
            :active-value="1"
            :inactive-value="2"
            @change="playerSave"
          ></el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.switch_status==1"
          label="微信播放器启用短剧"
          prop="playlet_ids"
          class="playlets"
          style="margin-top: -15px;padding:0;"
        >
          <template slot="label">
            微信播放器启用短剧
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
            >
              <div slot="content" class="tooltipLine">
                <p>1、未启用短剧默认使用自研(现有)播放器</p>
                <p>2、此处设置后，需要在渠道管理-微信播放器组件-设置开启，才可生效</p>
              </div>
              <i class="el-icon-question" style="color:#86909C;"></i>
            </el-tooltip>
            <el-button
              key=""
              type="text"
              size="medium"
              style="margin-left:580px;"
              @click="onRemoveAll"
            >清除</el-button>
          </template>
          <div class="selectContent">
            <el-select
              ref="platlet"
              v-model="ruleForm.playlet_ids"
              style="width:750px;"
              filterable
              multiple
              remote
              cla
              value-key="value"
              placeholder="请输入关键词"
              size="small"
              @focus="mobileClearPlatlet"
              @hook:mounted="mobileClearPlatlet"
              @visible-change="mobileClearPlatlet"
              @change="selectChange"
            >
              <el-option
                v-for="item in platletNameList"
                :key="item.value"
                :label="item.label"
                :value="item"
              > </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button
        type="primary"
        :loading="loading"
        class="btn"
        @click="playerSave"
      >确 定</el-button>
    </div>
  </div>
</template>

<script>
import { commonData } from '@/api/common'
import { playerData, playerSave } from '@/api/player'
export default {
  data() {
    return {
      platletNameList: [],
      loading: false,
      allplayletList: [],
      ruleForm: {
        switch_status: 2,
        mini_app_id: window.localStorage.getItem('mini_app_id'),
        playlet_ids: []
      }
    }
  },
  mounted() {
    this.platletList('')
    this.$AccessReport.report('zhangyu-player', [this.$store.state.user.routerItem.name, '播放器管理', '播放器管理'])
  },
  methods: {
    onRemoveAll() {
      this.ruleForm.playlet_ids = []
    },
    selectChange(value) {
      console.log(value)
      if (value.length > 0) {
        const index = value.findIndex(item => item.value === -1)
        if (index !== -1) {
          this.ruleForm.playlet_ids = JSON.parse(JSON.stringify(this.platletNameList))
          const index = this.platletNameList.findIndex((item) => {
            return item.value == -1
          })
          this.ruleForm.playlet_ids.splice(index, 1)
        }
      } else {
        this.ruleForm.playlet_ids = []
      }
    },
    async requestData() {
      const res = await playerData({})
      this.ruleForm.switch_status = Number(res.data.switch_status)
      if (res.data.playlet_ids && res.data.playlet_ids.length > 0) {
        res.data.playlet_ids.map(item => {
          const listItem = this.platletNameList.find(items => Number(items.value) === Number(item))
          if (listItem) {
            this.ruleForm.playlet_ids.push({
              label: listItem.label,
              value: (listItem.value)
            })
          } else {
            const listItem = this.allplayletList.find(items => Number(items.value) === Number(item))
            if (listItem) {
              const appItem = {
                label: listItem.label,
                value: (listItem.value)
              }
              this.ruleForm.playlet_ids.push(appItem)
              this.platletNameList.push(appItem)
            }
          }
        })
      } else {
        this.ruleForm.playlet_ids = []
      }
    },
    async allPlaylet() {
      const res = await commonData({
        type: 'playlet',
        mini_app_id: window.localStorage.getItem('mini_app_id'),
        value: ''
      })
      if (res.status_code == 1) {
        this.allplayletList = res.data.data.map(item => {
          return { label: item.label, value: Number(item.value) }
        })
      }
      this.requestData()
    },
    async platletList(query) {
      const res = await commonData({
        type: 'miniAppPlaylet',
        mini_app_id: window.localStorage.getItem('mini_app_id'),
        value: query
      })
      if (res.status_code == 1) {
        this.platletNameList = res.data.data.map(item => {
          return { label: item.label, value: item.value }
        })
        this.platletNameList.unshift({ label: '全选', value: -1 })
      }
      this.allPlaylet()
    },
    async playerSave() {
      // if (this.ruleForm.switch_status == 1 && this.ruleForm.playlet_ids.length == 0) {
      //   this.$message.warning('请选择微信播放器启用短剧')
      //   return
      // }
      this.loading = true
      const { switch_status, mini_app_id } = this.ruleForm
      const playlet_ids = this.ruleForm.playlet_ids.map(item => item.value)
      const data = {
        switch_status,
        mini_app_id,
        playlet_ids
      }
      const res = await playerSave(data)
      this.loading = false
      if (res.status_code === 1) {
        this.$message.success(res.msg)
      }
    },
    mobileClearPlatlet(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { platlet } = this.$refs
            const input = platlet.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.playerContentMain{
  width: 100%;
  height: calc(100vh - 100px);
  position: relative;
  border-radius: 5px;
  .dialog-footer{
      border: none;
      width: calc(100% - 40px);
      padding-left: 20px;
    }
}
.playerContent{
    width: 100%;
    height: calc(100vh - 100px);
    border-radius: 5px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    padding-top: 10px;
    .playerBtn{
        width: 100%;
        height: 60px;
        position: absolute;
        bottom: 0px;
        left:0px;
        padding-left: 20px;
        padding-top: 15px;
        background: #FFFFFF;
        box-shadow: 0px -4px 10px 0px rgba(0,0,0,0.05);
    }

    .playlets{
      ::v-deep .el-form-item__label{
        padding: 0 !important;
      }
    }
    .selectContent{
      width: 100%;
      height: calc(100vh - 250px);
      padding-bottom: 50px;
      overflow: auto;
    }

}
</style>